<!DOCTYPE html>
<html>
  ​

  <head>
    <title></title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
    />
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' *; img-src https://*; child-src 'none';"> -->
    <link rel="stylesheet" type="text/css" href="index.css" media="screen" />
  </head>
  ​

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script src="node_modules/@luigi-project/client/luigi-client.js"></script>
    <script>
      let myUserSettings = {};
      window.LuigiClient.addInitListener((context, origin) => {
        renderData(context);
      });

      function renderData(context) {
        myUserSettings = context.userSettingsData;
        if (myUserSettings.theme) {
          let button = document.querySelector('.' + myUserSettings.theme);
          button.classList.add('active');
        }
      }

      function changeTheming(theme) {
        document.querySelectorAll('.btnList button').forEach(button => {
          button.classList.remove('active');
        });
        document.querySelector('.' + theme).classList.add('active');
        myUserSettings.theme = theme;
        window.LuigiClient.sendCustomMessage({
          id: 'luigi.updateUserSettings',
          data: myUserSettings
        });
      }
    </script>
    <div>
      <ul class="btnList">
        <li>
          <button class="red" style="color:red" onclick="changeTheming('red')">
            Red
          </button>
        </li>
        <br />
        <br />
        <li>
          <button class="green" style="color: green" onclick="changeTheming('green')">
            Green
          </button>
        </li>
        <br />
        <br />
        <li>
          <button class="blue" style="color:blue" onclick="changeTheming('blue')">
            Blue
          </button>
        </li>
        <br />
        <br />
        <li>
          <button class="yellow" style="color: yellow" onclick="changeTheming('yellow')">
            Yellow
          </button>
        </li>
        <br />
        <br />
        <li>
          <button class="red" style="color:dark" onclick="changeTheming('dark')">
            dark
          </button>
        </li>
        <br />
        <br />
        <li>
          <button class="violet" style="color: violet" onclick="changeTheming('violet')">
            violet
          </button>
        </li>
        <br />
        <br />
        <li>
          <button
            class="mediumspringgreen"
            style="color:mediumspringgreen"
            onclick="changeTheming('mediumspringgreen')"
          >
            mediumspringgreen
          </button>
        </li>
        <br />
        <br />
        <li>
          <button class="green" style="color: green" onclick="changeTheming('green')">
            Green
          </button>
        </li>
        <br />
        <br />
        <li>
          <button class="red" style="color:red" onclick="changeTheming('red')">
            Red
          </button>
        </li>
        <br />
        <br />
        <li>
          <button class="green" style="color: green" onclick="changeTheming('green')">
            Green
          </button>
        </li>
        <br />
        <br />
        <li>
          <button class="red" style="color:red" onclick="changeTheming('red')">
            Red
          </button>
        </li>
        <br />
        <br />
        <li>
          <button class="green" style="color: green" onclick="changeTheming('green')">
            Green
          </button>
        </li>
        ​
      </ul>
      This simulates a super long test... sadfklasdfjöasldkfla salfj asdfl sdfnskdj fksd
      fksdjfh dskjfhsd fis fi sdjfgsd fi shdf sdif sdfi sf asid asdjas hdoad
      sadfklasdfjöasldkfla salfj asdfl sdfnskdj fksd fksdjfh dskjfhsd fis fi sdjfgsd fi
      shdf sdif sdfi sf asid asdjas hdoad öasldkfla salfj asdfl sdfnskdj fksd fksdjfh
      dskjfhsd fis fi sdjfgsd fi shdf sdif sdfi sf asid asdjas hdoad sadfklasdfjöasldkfla
      salfj asdfl sdfnskdj fksd fksdjfh dskjfhsd fis fi sdjfgsd fi shdf sdif sdfi sf asid
      asdjas hdoad
    </div>
  </body>
  ​
</html>
